<!DOCTYPE html>
<html>
<head>
	<title>De_tree</title>
	<meta charset="utf-8">
	<script type="text/javascript" src='https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js'></script>
	<style type="text/css">
		/**{ margin:0; padding:0;}*/
		.tree ul li{ display:none;list-style:none;}
		.tree ul li{ margin-left:20px;}
	</style>
</head>
<body>
	<div class="tree">
		<ul>
			<a href="#">one</a>
			<li>
				<ul>
					<a href="#">two</a>
					<li>
						<ul>
							<a href="#">three</a>
							<li>1</li>
							<li>2</li>
							<li>3</li>
							<li>4</li>
						</ul>
					</li>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
			</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>
</body>
<script type="text/javascript">
	$('ul > a').click(function (){
		$(this).siblings('li').toggle();
	});
</script>
</html>